<template>
    <div>
        <template>
            <el-table :data="UserData" style="width:100%">
                <el-table-column fixed prop="id" label="编号" width="50">
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="280" >
                </el-table-column>
                <el-table-column prop="nickname" label="昵称" width="150">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="editUser(scope.row)" type="text" size="small">修改</el-button>
                        <el-button @click="deleteUser(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog :visible="dialogVisible" title="修改用户" width="55%" :visible.sync="dialogVisible">
                <el-form label-width="120px">
                    <el-form-item label="用户名">
                        <el-input v-model="editedUserData.username" />
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="editedUserData.nickname" />
                    </el-form-item>
                    <el-form-item>
                            <el-button type="primary" @click="submit" >提交</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </template>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "User",
    mounted() {
        this.AllUser();
    },
    methods: {
        handleCurrentChange(val) {
            this.page = val;
            if (this.isDirectPageButton) {
                this.listSubstringContent();
            } else {
                this.getArticleByTitle();
            }
        },
        AllUser() {
            axios.get('/user/all')
                .then(value => {
                    const data = value.data
                    console.log(data);
                    if (data.success) {
                        this.UserData = data.content;
                    } else {
                        this.$message.error({ message: data.message })
                    }
                })
        },
        deleteUser(row) {
            axios.get('/user/delete/' + row.id)
                .then(value => {
                    this.$message({
                        message: "删除成功",
                        type: 'success'
                    });
                    this.AllUser()
                })
            this.AllUser()
        },
        editUser(row) {
            console.log(row);
            this.dialogVisible = true
            this.editedUserData = row

        },
        submit(row) {
            console.log(row);
            axios.put('/user/update', {
                username: this.editedUserData.username,
                nickname: this.editedUserData.nickname,
                id:this.editedUserData.id
            }).then(value => {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                window.location.reload();
                window.location.reload();
                this.dialogVisible = false
                
            })
            
            this.AllUser();
        }
    },
    data() {
        return {
            searchTitle: '',
            UserData: [],
            tagString: '',
            page: 1,
            pageSize: 20,
            total: 100,
            isDirectPageButton: false,
            editedUserData: {},
            dialogVisible: false,
        }
    }
}
</script>

<style scoped>
.titleInput,
.searchBtn {
    float: left;
    margin: 10px 10px 10px 0px;
}

.titleInput {
    width: 300px;
}

.tag {
    margin: 0px 3px 0px 3px;
}
</style>